import "ol/ol.css"
import { Map, View } from "ol"
import MousePosition from "ol/control/MousePosition"
import { createStringXY } from "ol/coordinate"
import { defaults as defaultControls } from "ol/control"

import { register } from "ol/proj/proj4"
import proj4 from "proj4"
import { transform, toLonLat, fromLonLat } from "ol/proj"
import TileArcGIS from "./TileArcGIS"

import TileLayer from "ol/layer/Tile"
import OSM from "ol/source/OSM"
import TileArcGISRest from "ol/source/TileArcGISRest"
import TDT from "./tdt"
import { getTianditu } from "../initmap/tianditu"

class InitMap {
  constructor(el, params) {
    this.map = null
    return this._init(el, params)
  }

  /**
   *
   * @param {容器ID} el
   * @param {*} option
   * @returns
   */
  _init(el = "map", option = {}) {
    let code = option.srid || "EPSG:3857"
    let center = option.center || [109.649862, 19.133798]
    let zoom = option.zoom || 6
    if (code === "EPSG:4490") {
      proj4.defs(
        code,
        'GEOGCS["China Geodetic Coordinate System 2000",DATUM["China_2000",SPHEROID["CGCS2000",6378137,298.257222101,AUTHORITY["EPSG","1024"]],AUTHORITY["EPSG","1043"]],PRIMEM["Greenwich",0,AUTHORITY["EPSG","8901"]],UNIT["degree",0.0174532925199433,AUTHORITY["EPSG","9122"]],AUTHORITY["EPSG","4490"]]'
      )
      register(proj4)
    } else {
      center = fromLonLat(center)
    }
    const mousePositionControl = new MousePosition({
      coordinateFormat: createStringXY(6),
      projection: "EPSG:4326",
      // className: 'custom-mouse-position',
      // target: document.getElementById('mouse-position'),
    })

    let map = new Map({
      target: el,
      controls: defaultControls().extend([mousePositionControl]),
      view: new View({
        projection: code,
        center: center,
        // center: [12367323.670122167, 1648649.571880661],
        zoom: zoom,
      }),
    })
    this.map = map

    const defaultMap = option.defaultMap
    if (defaultMap.type === "arcgis") {
      // 添加arcgis图层
      this.addArcGISTile(defaultMap.url)
    } else if (defaultMap.type === "agsoff") {
      // arcgis 离线瓦片
      this.addArcGISOff(defaultMap.url)
    }else if (defaultMap.type === "osm") {
      const layer = new OSM()
      this.map.addLayer(layer)
    } else if (defaultMap.type === "tdt") {
      //添加天地图服务
      this.addTDT(defaultMap.url, defaultMap);
    } else {
      this.addArcGISTile()
    }

    return map
  }

  /**
   * arcgis tiled mapserver
   * @param {切片服务地址} url
   * @param {*} opt
   */
  addArcGISTile(url) {
    let lyrurl = url || "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer"
    const arcgisTile = new TileLayer({
      source: new TileArcGISRest({
        url: lyrurl,
      }),
    })
    this.map.addLayer(arcgisTile)
  }

  /**
   * web服务器发布的arcigs瓦片服务地址
   * @param {瓦片服务地址} url
   */
  addArcGISOff(url) {
    const opt = { url: url }
    const agsOff = new TileArcGIS()
    const layer = agsOff.addTile(opt)
    this.map.addLayer(layer)
  }

  /**
   * 天地图瓦片服务地址
   * @param {*} url
   * @param {*} opt
   */
  addTDT(url, opt) {
    const layer = getTianditu({
      type: opt.lyrtype || "影像底图",
      proj: opt.proj || "经纬度投影",
      key: opt.key || "03b6217458512463ea974be2e9b0d88b",
    })
    this.map.addLayer(layer)
  }
}

export default InitMap
